<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
 .m-player {
  width: 266px;
  height: 479px;
  background: url(../img/home/page1-bannerbg1.png) no-repeat;
  position: absolute;
  right: 50%;
  top: 10%;
}
.m-player .m-item {
  background: white;
  width: 221px;
  height: 189px;
  padding: 0 8px;
  overflow: hidden;
}
.m-player .m-list {
margin:0px;
padding:0px;
  width: 221px;
}
.m-player .m-hd {
 
  font-size: 22px;
  color: #f96046;
margin:0px;
  width: 100%;
  background: #fff;
  font-family: "\5FAE\8F6F\96C5\9ED1", "\5B8B\4F53";
  text-align: center;
  line-height: 50px;
  border-bottom: 2px solid #FCAFA2;
}
.m-player li {
  font-family: "\5FAE\8F6F\96C5\9ED1", "\5B8B\4F53";
  line-height: 22px;
  height: 40px;
  padding: 11px 0px;
  border-bottom: 1px dashed #FEC2B2;
  list-style-type:none;
}
.m-player li h3 {
  font-weight: normal;
  font-size: 14px;
  color: #333131;
  margin:0px;
}
.m-player li img {
  float: left;
  display: block;
  width: 36px;
  height: 36px;
  border: 2px solid #fec2b2;
  border-radius: 50%;
  margin-right: 10px;
}
.m-player li p {
  font-size: 12px;
  color: #646464;
  margin:0px;
}
    </style>
</head>
<body>
    <div id="J_Slider" class="m-player">
    <p class="m-hd">补贴动态</p>
    <div id="J_item" class="m-item">
        
        <ul id="J_list" class="m-list" >
            <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯1</h3>
                <p>完成《百度搜索》赚了1.0元</p>
            </li>
            <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯2</h3>
                <p>完成《百度搜索》赚了2.0元</p>
            </li>
            <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯3</h3>
                <p>完成《百度搜索》赚了3.0元</p>
            </li>
            <!-- <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯4</h3>
                <p>完成《百度搜索》赚了4.0元</p>
            </li>
            <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯5</h3>
                <p>完成《百度搜索》赚了1.0元</p>
            </li>
            <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯6</h3>
                <p>完成《百度搜索》赚了1.0元</p>
            </li> -->
        </ul>
    </div>                 
</div>
<script type="text/javascript">
window.onload=function (){
   //      function startmarquee(lh,speed,delay) {
   //      var iSpeed=1;
   //      var timer;
   //      var oUl=document.getElementById("J_list");
   //      oUl.innerHTML+=oUl.innerHTML;
   //      oUl.style.marginTop=-1*oUl.offsetHeight/2+"px";
        
   //      function start(){
   //      timer=setInterval(scrolling,speed);
		 //    oUl.onmouseover=function(){clearInterval(timer)}
   //      oUl.onmouseout=function(){timer=setInterval(scrolling,speed);}
   //      }
   //      function scrolling(){
			// oUl.style.marginTop=parseInt(oUl.style.marginTop)+iSpeed+"px";
			// if(parseInt(oUl.style.marginTop)>=0){
			// 	oUl.style.marginTop=-1*oUl.offsetHeight/2+"px"
			// }
        
   //      }
   //      setTimeout(start,delay);
   //      }
   //  startmarquee(63,10,1500);


          // function startmarquee(lh,speed,delay) {
          // var iSpeed=1;
          // var timer;
          // var oUl=document.getElementById("J_list");
          // oUl.innerHTML+=oUl.innerHTML;
          // oUl.style.marginTop=-1*oUl.offsetHeight/2+"px";
          // function start(){
          // timer=setInterval(scrolling,speed);
          // oUl.onmouseover=function(){clearInterval(timer)}
          // oUl.onmouseout=function(){timer=setInterval(scrolling,speed);}
          // oUl.style.marginTop=parseInt(oUl.style.marginTop)+iSpeed+"px";
          // }
          // function scrolling(){
          //   if(parseInt(oUl.style.marginTop)%lh!=0){
          //   oUl.style.marginTop=parseInt(oUl.style.marginTop)+iSpeed+"px";
          //   if(parseInt(oUl.style.marginTop)>=0) oUl.style.marginTop=-1*oUl.offsetHeight/2+"px";
          //   }else{
          //   clearInterval(timer);
          //   setTimeout(start,delay);
          //   }
          //   }
     
          // setTimeout(start,delay);
          // }
          // startmarquee(63,10,1500);

function startmarquee(lh,speed,delay) {
    var p=false;
    var iSpeed=1;
    var timer;
    var oUl=document.getElementById("J_list");
    oUl.innerHTML+=oUl.innerHTML;
    oUl.style.marginTop=-1*oUl.offsetHeight/2+"px";
    oUl.onmouseover=function(){p=true;}
    oUl.onmouseout=function(){p=false;}
    function start(){
    timer=setInterval(scrolling,speed);
    if(!p) oUl.style.marginTop=parseInt(oUl.style.marginTop)+iSpeed+"px";
    }
    function scrolling(){
    if(parseInt(oUl.style.marginTop)%lh!=0){
    oUl.style.marginTop=parseInt(oUl.style.marginTop)+iSpeed+"px";
     if(parseInt(oUl.style.marginTop)>=0) oUl.style.marginTop=-1*oUl.offsetHeight/2+"px";
    }else{
    clearInterval(timer);
    setTimeout(start,delay);
    }
    }
    setTimeout(start,delay);
    }
  startmarquee(63,10,1500);

        }
</script>
</body>
</html>